/*
 * 版权：Copyright (c) 2019 红网
 * 
 * 创建日期：Wednesday March 13th 2019
 * 创建者：胡燕龙(huyl) - y.dragon.hu@hotmail.com
 * 
 * 修改日期: Wednesday, 13th March 2019 11:18:47 am
 * 修改者: 胡燕龙(huyl) - y.dragon.hu@hotmail.com
 * 
 * 说明
 * 		1、测试视图
 */
import React from "react";
// import { ObjectFieldList } from "src/business/components/object-field-list";
// import { FieldList } from "src/business/components/field-list";
import { CustomProperties } from "src/business/components/custom-properties";
import { Menu, Icon } from "antd";
import { NTCountdownInput } from "src/business/components/countdown-input";
const { SubMenu, ItemGroup: MenuItemGroup } = Menu;
import { ReactViewState, ReactView, reactControl, ReactViewControl } from "pao-aop-client";
import { addon, Ref, getObject, NullablePromise } from "pao-aop";
import { Layout, Form, Input, Switch, Select, Button, DatePicker, InputNumber, Card, Collapse } from "antd";
import { WrappedFormUtils } from "antd/lib/form/Form";
import { Moment } from 'moment';

const { Option } = Select, { Header, Content } = Layout, { Panel } = Collapse;

/**
 * 数据类型测试服务接口
 */
export class IDataTypeTestService {
    /**
     * 测试数据类型
     * @param type_string 字符串类型
     * @param type_number 数字类型
     * @param type_bool 布尔类型
     * @param type_date 时间类型
     * @param type_array 数组类型
     * @param type_object 对象类型
     */
    test?(type_string: string, type_number: number, type_bool: boolean, type_date: Moment, type_array: string[], type_object: object): NullablePromise<{}> {
        return undefined;
    }
    /**
     * 设置session
     */
    set_session?(): NullablePromise<void> {
        return;
    }
    /**
     * 获取session
     */
    get_session?(): NullablePromise<void> {
        return;
    }
    /** 测试异常 */
    test_error?(): NullablePromise<void> {
        return;
    }
}

/** 测试表单数据 */
export interface TestFormValue {
    /** 字符串类型 */
    type_string: string;
    /** 数字类型 */
    type_number: number;
    /** Moment时间类型 */
    type_date: Moment;
    /** 布尔类型 */
    type_bool: boolean;
    /** 数组类型 */
    type_array: string[];
}

/** 状态：测试视图 */
export interface TestViewState extends ReactViewState {
}

/** 组件：测试视图 */
export class TestView extends ReactView<TestViewControl, TestViewState> {
    constructor(props: TestViewControl) {
        super(props);
        this.handleSubmit = this.handleSubmit!.bind(this);
        this.handleSetSession = this.handleSetSession!.bind(this);
        this.handleGetSession = this.handleGetSession!.bind(this);
        this.handleTestError = this.handleTestError!.bind(this);
    }
    /**
     * 数据类型测试服务
     */
    dataTypeTestService() {
        return getObject(this.props.dataTypeTestService_Fac);
    }
    /**
     * 事件：提交
     * @param e 事件参数
     */
    handleSubmit?(e: React.FormEvent<any>) {
        e.preventDefault();
        this.props.form!.validateFields((err, values: TestFormValue) => {
            if (!err) {
                console.log("request ===> ", values);
                this.dataTypeTestService()!
                    .test!(values.type_string, values.type_number, values.type_bool, values.type_date, values.type_array, values)!
                    .then(result => {
                        console.log("response ===> ", result);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        });
    }
    /** 事件：设置Session */
    handleSetSession?() {
        this.dataTypeTestService()!.set_session!()!.then(() => { });
    }
    /** 事件：获取Session */
    handleGetSession?() {
        this.dataTypeTestService()!.get_session!()!.then(() => { });
    }
    handleTestError?() {
        this.dataTypeTestService()!
            .test_error!()!
            .then(() => { })
            .catch(error => {
                debugger;
                console.log('Error ==>', error);
            });
    }
    render() {
        const
            { getFieldDecorator } = this.props.form!,
            formItemLayout = {
                labelCol: { span: 6 },
                wrapperCol: { span: 14 },
            },
            config = {
                rules: [{ type: 'object', required: true, message: '请选择时间!' }]
            };
        return (
            <div>
                {/* <ObjectFieldList befor_placeholder='联系人' after_placeholder='手机号码' before_key='title' after_key='contents' /> */}
                {/* <FieldList befor_placeholder='请输入邮箱地址' before_key='title' /> */}
                <CustomProperties befor_placeholder='类目名称' after_placeholder='请输入类目信息' type_key='type' before_key='title' after_key='contents' />
                <NTCountdownInput inputPlaceholder='请输入验证码' type='number' countdownSecond={60} startText='获取验证码' countdownText='秒后重新获取' onClick={function () { alert('222'); }} />
                <Menu
                    mode="horizontal"
                    theme='dark'
                >
                    <Menu.Item key="mail">
                        <Icon type="mail" />Navigation One
                    </Menu.Item>
                    <Menu.Item key="app">
                        <Icon type="appstore" />Navigation Two
                    </Menu.Item>
                    <SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />Navigation Three - Submenu</span>}>
                        <MenuItemGroup title="Item 1">
                            <Menu.Item key="setting:1">Option 1</Menu.Item>
                            <Menu.Item key="setting:2">Option 2</Menu.Item>
                        </MenuItemGroup>
                        <MenuItemGroup title="Item 2">
                            <Menu.Item key="setting:3">Option 3</Menu.Item>
                            <Menu.Item key="setting:4">Option 4</Menu.Item>
                        </MenuItemGroup>
                    </SubMenu>
                    <Menu.Item key="alipay">
                        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
                    </Menu.Item>
                </Menu>
                <Layout>
                    <Header>数据类型测试</Header>
                    <Content>
                        <Collapse defaultActiveKey={['1']}  >
                            <Panel key={'1'} header={"数据类型测试"}>
                                <Card>
                                    <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                                        <Form.Item
                                            label="字符串"
                                        >
                                            {getFieldDecorator('type_string', {
                                                initialValue: 'Xiodra',
                                                rules: [
                                                    { required: true, message: '请输入!' }
                                                ]
                                            })(
                                                <Input />
                                            )}
                                        </Form.Item>
                                        <Form.Item
                                            label="数字"
                                        >
                                            {getFieldDecorator('type_number', {
                                                initialValue: 10.1,
                                                rules: [
                                                    { required: true, message: '请输入!' }
                                                ]
                                            })(
                                                <InputNumber min={10} max={20} step={0.1} />
                                            )}
                                        </Form.Item>
                                        <Form.Item
                                            label="时间"
                                        >
                                            {getFieldDecorator('type_date', config)(
                                                <DatePicker />
                                            )}
                                        </Form.Item>
                                        <Form.Item
                                            label="布尔"
                                        >
                                            {getFieldDecorator('type_bool', {
                                                valuePropName: 'checked',
                                                initialValue: false,
                                                rules: [{ required: true, message: '请选择!' }]
                                            })(
                                                <Switch />
                                            )}
                                        </Form.Item>
                                        <Form.Item
                                            label="数组"
                                        >
                                            {getFieldDecorator('type_array', {
                                                rules: [
                                                    { required: true, message: '请选择一种颜色', type: 'array' },
                                                ]
                                            })(
                                                <Select mode="multiple" placeholder="Please select favourite colors">
                                                    <Option value="red">Red</Option>
                                                    <Option value="green">Green</Option>
                                                    <Option value="blue">Blue</Option>
                                                </Select>
                                            )}
                                        </Form.Item>
                                        <Form.Item
                                            wrapperCol={{ span: 12, offset: 6 }}
                                        >
                                            <Button type="primary" htmlType="submit">Submit</Button>
                                        </Form.Item>
                                    </Form>
                                </Card>
                            </Panel>
                            <Panel key={'2'} header={"Session测试"}>
                                <Card>
                                    <Button.Group>
                                        <Button onClick={this.handleSetSession}>设置Session</Button>
                                        <Button onClick={this.handleGetSession}>获取Session</Button>
                                    </Button.Group>
                                </Card>
                            </Panel>
                            <Panel key={'3'} header={"异常测试"}>
                                <Card>
                                    <Button onClick={this.handleTestError}>异常</Button>
                                </Card>
                            </Panel>
                        </Collapse>
                    </Content>
                </Layout>
            </div>

        );
    }
}

/**
 * 控件：测试视图控制器
 * @description 测试视图
 */
@addon('TestView', '测试视图', '测试视图')
@reactControl(Form.create<TestViewControl>()(TestView))
export class TestViewControl extends ReactViewControl {
    /** Form工具类 */
    form: WrappedFormUtils;
    /** shuzhi */
    attr_num?: number;

    /**
     * 控件：测试视图控制器
     * @param dataTypeTestService_Fac 数据类型测试服务
     */
    constructor(public dataTypeTestService_Fac?: Ref<IDataTypeTestService>) {
        super();
    }
}